<!-- 注册 -->
<template>
    <view class="container">
        <uni-nav-bar title="注册" :statusBar="true" fixed :border="false" backgroundColor="#4165FB" color="#FFFFFF">
        </uni-nav-bar>

        <!-- 背景 -->
        <image class="registerBg" src="@/static/images/register_bg.png" mode="aspectFill"/>

        <!-- 内容 -->
        <view class="registerLayout">
            <view class="registerTitle">您好，请注册</view>

            <!-- 编号 -->
            <view class="inputLayout">
                <!-- 输入框背景图 -->
                <image class="inputBg" src="@/static/images/register_input_bg1.png" mode="widthFix"/>
                <!-- 输入内容 -->
                <view class="inputContent">
                    <view class="inputTitle">编号</view>
                    <u-input :customStyle="{height:'100%',border:'none'}" placeholder="请输入部门编号"
                             v-model="deptId" clearable @blur="onDeptIdBlur">
                    </u-input>
                </view>
            </view>

            <!-- 姓名 -->
            <view class="inputLayout">
                <!-- 输入框背景图 -->
                <image class="inputBg" src="@/static/images/register_input_bg1.png" mode="widthFix"/>
                <!-- 输入内容 -->
                <view class="inputContent">
                    <view class="inputTitle">姓名</view>
                    <u-input :customStyle="{height:'100%',border:'none'}" placeholder="请输入姓名"
                             v-model="userName" clearable>
                    </u-input>
                </view>
            </view>

            <!-- 手机号 -->
            <view class="inputLayout">
                <!-- 输入框背景图 -->
                <image class="inputBg" src="@/static/images/register_input_bg1.png" mode="widthFix"/>
                <!-- 输入内容 -->
                <view class="inputContent2">
                    <view class="inputTitle2">手机号</view>
                    <u-input :customStyle="{height:'100%',border:'none'}" placeholder="请输入手机号"
                             v-model="phoneNumber" clearable>
                    </u-input>
                </view>
            </view>

            <!-- 岗位 -->
            <view class="inputLayout">
                <!-- 输入框背景图 -->
                <image class="inputBg" src="@/static/images/register_input_bg1.png" mode="widthFix"/>
                <!-- 输入内容 -->
                <view class="inputContent">
                    <view class="inputTitle">岗位</view>
                    <u-input :customStyle="{height:'100%',border:'none',flex:'1'}" placeholder="请输入岗位"
                             v-model="post" clearable>
                    </u-input>
                    <!-- 选择按钮 -->
<!--                    <view class="btnSelect" @click="isShowSelect = true">选择</view>-->
                </view>
            </view>

            <!-- 备注 -->
            <view class="inputLayout">
                <!-- 输入框背景图 -->
                <image class="inputBg" src="@/static/images/register_input_bg1.png" mode="widthFix"/>
                <!-- 输入内容 -->
                <view class="inputContent">
                    <view class="inputTitle">备注</view>
                    <u-input :customStyle="{height:'100%',border:'none'}" placeholder="请输入备注"
                             v-model="remark" clearable>
                    </u-input>
                </view>
            </view>

            <!-- 注册按钮 -->
            <view class="btnRegister" @click="register">点击注册</view>

            <!-- 车图标 -->
            <image class="registerCar" src="@/static/images/register_car_icon.png" mode="widthFix"/>
        </view>

        <!-- 提示 -->
        <view class="registerNotice">*以上信息除备注均必填*</view>
    </view>

    <!-- 底部选择器 -->
    <u-picker :show="isShowSelect" :columns="postList" keyName="name" closeOnClickOverlay
              @cancel="isShowSelect = false" @confirm="onPickerConfirm">
    </u-picker>
</template>

<script setup>
import * as Constants from "@/common/Constants";
import {onLoad} from "@dcloudio/uni-app";
import {myStore} from "@/stores";
import {commitConfigRequest, getPostByDeptId, queryParentName} from "@/net/Api";

const store = myStore()
const deptId = ref("")
const userName = ref("")
const phoneNumber = ref("")
const post = ref("")
const remark = ref("")
const companyId = ref("")
const postList = ref([])
const isShowSelect = ref(false)

computed(() => {
    return {
        Constants
    }
})

onLoad((options) => {

})

/**
 * 编号失去焦点
 */
const onDeptIdBlur = (e) => {
    // queryParentNameRequest()
    // getPostByDeptIdRequest()
}

/**
 * 底部选择器确认
 */
const onPickerConfirm = (e) => {
    console.log('confirm', e);
    post.value = e.value[0].name
    isShowSelect.value = false
}


/**
 * 查询部门及父部门名称
 */
const queryParentNameRequest = () => {
    let params = {
        id: deptId.value
    }
    queryParentName(params).then((res) => {
        companyId.value = res.data.companyId

        if (res.data.name) {
            uni.showToast({
                title: res.data.name,
                icon: 'none'
            })
            getPostByDeptIdRequest()
        }
    }).catch((err) => {
        postList.value = []
        uni.showToast({
            title: '输入的编号有误',
            icon: 'none'
        })
        console.log("err = ", err)
    })
}

/**
 * 查询部门下的岗位
 */
const getPostByDeptIdRequest = () => {
    let params = {
        id: deptId.value
    }
    getPostByDeptId(params).then((res) => {
        postList.value = [res.data]
    }).catch((err) => {
        console.log("err = ", err)
    })
}

/**
 * 注册请求
 */
const register = () => {
    // if (!companyId.value) {
    //     uni.showToast({
    //         title: '编号对应的公司未查询到',
    //         icon: "none"
    //     })
    //     return;
    // }
    if (!deptId.value) {
        uni.showToast({
            title: '部门编号未输入',
            icon: "none"
        })
        return;
    }

    let params = {
        companyId: companyId.value,
        deptCode: deptId.value,
        deviceCode: store.deviceId,
        deviceType: "微信小程序",
        name: userName.value,
        phone: phoneNumber.value,
        post: post.value,
        comment: remark.value,
        cardNo: "",
        unitName: "",
    }
    commitConfigRequest(params).then((res) => {
        uni.showToast({
            title: '提交成功',
            icon: "none"
        })
        setTimeout(() => {
            uni.reLaunch({
                url: '/pages/login/login',
            })
        }, 400)
    }).catch((err) => {

    })
}
</script>

<style scoped lang="scss">
.container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.registerBg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.registerLayout {
    width: 80%;
    background-color: #FFFFFF;
    border-radius: 15rpx;
    padding: 30rpx;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.registerTitle {
    font-size: 42rpx;
    font-weight: bold;
    color: #4165FB;
    margin: 20rpx 0 60rpx;
    letter-spacing: 2rpx;
}

.inputLayout {
    width: 100%;
    height: 118rpx;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30rpx;
}

.inputBg {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.inputContent {
    width: 80%;
    display: flex;
    align-items: center;
    z-index: 99999;
}

.inputContent2 {
    width: 88%;
    display: flex;
    align-items: center;
    z-index: 99999;
}

.inputTitle {
    font-size: 34rpx;
    color: #333333;
    margin-right: 40rpx;
}

.inputTitle2 {
    font-size: 34rpx;
    color: #333333;
    margin-right: 30rpx;
}

.btnSelect {
    background-color: #4165FB;
    font-size: 32rpx;
    border-radius: 15rpx;
    color: #FFFFFF;
    padding: 10rpx 20rpx;
    letter-spacing: 1rpx;
}

.btnRegister {
    font-size: 38rpx;
    color: #FFFFFF;
    background-color: #4165FB;
    border-radius: 50rpx;
    padding: 15rpx 110rpx;
    letter-spacing: 1rpx;
}

.registerCar {
    width: 90%;
    margin-top: 30rpx;
}

.registerNotice {
    font-size: 38rpx;
    color: #FFFFFF;
    z-index: 9999;
    margin-top: 30rpx;
    letter-spacing: 1rpx;
}
</style>